html {
  height: 100%;
}
body {
  background: linear-gradient(180deg, black, gray);
  display: flex;
  height: 100%;
  perspective: 800px;
  overflow: hidden;
}
.card {
  width: 400px;
  height: 540px;
  background: url(zt4.png);
  background-size: cover;
  background-position: center;
  margin: auto;
  border-radius: 15px;
  position: relative;
  left: 0;
  top: 0;
  transition: all 1s;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card .mask {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 15px;
  transition: inherit;
}
.card:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 15px;
  transition: inherit;
}
.card:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 15px;
  transition: inherit;
  background: black;
  z-index: -1;
  transform: translateZ(-20px);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.8);
}
.card h3 {
  font-size: 36px;
  color: white;
  margin-bottom: 15px;
  font-family: Times New Roman;
}
.card h4 {
  font-size: 16px;
  color: white;
  margin-bottom: 15px;
  font-family: Times New Roman;
}
.card ul.chart {
  display: flex;
  justify-content: center;
  transition: inherit;
}
.card ul.chart li {
  width: 20px;
  height: 20px;
  background: white;
  margin: 10px;
  position: relative;
  left: 0;
  top: 0;
  transform: rotate(30deg);
  transform-style: preserve-3d;
  transition: inherit;
}
.card ul.chart li .chart-side {
  content: '';
  height: 20px;
  background: #e2d4d4;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: 0 100%;
  color: black;
  transition: inherit;
}
.card ul.chart li span {
  content: '';
  height: 20px;
  background: #e2d4d4;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: 0 100%;
  color: black;
  transition: inherit;
  background: #d9d7e4;
  width: 0px;
  color: transparent;
  text-align: right;
  transform: rotateY(-90deg) rotateX(-90deg) translateY(22px);
}
.card ul.chart li::after {
  content: '';
  height: 20px;
  background: #e2d4d4;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: 0 100%;
  color: black;
  transition: inherit;
  background: #7babd9;
  width: 0px;
  transform: rotateY(-90deg) translateZ(-20px);
}
.card ul.chart li::before {
  content: '';
  height: 20px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: 0 100%;
  color: black;
  transition: inherit;
  text-align: center;
  width: 20px;
  background: #e2d4d4;
  transform: translateZ(0px);
}
.card h5 {
  font-size: 38px;
  color: white;
  margin-top: 20px;
  font-family: serif;
}
.card:active {
  transform: rotateX(60deg) translate3d(0, -80px, 60px);
}
.card:active:before {
  background: rgba(0, 0, 255, 0.3);
}
.card:active ul.chart li {
  /* */
}
.card:active ul.chart li:nth-child(1) span {
  color: black;
  width: 200px;
}
.card:active ul.chart li:nth-child(1)::after {
  width: 200px;
}
.card:active ul.chart li:nth-child(1)::before {
  content: 'M';
  transform: translateZ(200px);
}
.card:active ul.chart li:nth-child(2) span {
  color: black;
  width: 100px;
}
.card:active ul.chart li:nth-child(2)::after {
  width: 100px;
}
.card:active ul.chart li:nth-child(2)::before {
  content: 'T';
  transform: translateZ(100px);
}
.card:active ul.chart li:nth-child(3) span {
  color: black;
  width: 150px;
}
.card:active ul.chart li:nth-child(3)::after {
  width: 150px;
}
.card:active ul.chart li:nth-child(3)::before {
  content: 'W';
  transform: translateZ(150px);
}
.card:active ul.chart li:nth-child(4) span {
  color: black;
  width: 240px;
}
.card:active ul.chart li:nth-child(4)::after {
  width: 240px;
}
.card:active ul.chart li:nth-child(4)::before {
  content: 'T';
  transform: translateZ(240px);
}
.card:active ul.chart li:nth-child(5) span {
  color: black;
  width: 70px;
}
.card:active ul.chart li:nth-child(5)::after {
  width: 70px;
}
.card:active ul.chart li:nth-child(5)::before {
  content: 'Y';
  transform: translateZ(70px);
}
.card:active ul.chart li:nth-child(6) span {
  color: black;
  width: 70px;
}
.card:active ul.chart li:nth-child(6)::after {
  width: 70px;
}
.card:active ul.chart li:nth-child(6)::before {
  content: 'S';
  transform: translateZ(70px);
}
.card:active ul.chart li:nth-child(7) span {
  color: black;
  width: 100px;
}
.card:active ul.chart li:nth-child(7)::after {
  width: 100px;
}
.card:active ul.chart li:nth-child(7)::before {
  content: 'Z';
  transform: translateZ(100px);
}
